<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
        }

        ul li {
            width: 23%;
            margin: 1%;
            border: 1px solid #000;
            box-sizing: border-box;
            text-align: center;
        }

        img {
            width: 100%;
            height: 200px;
            background-color: #f00;
        }
    </style>
</head>

<body>

    <ul id="list">
        <!-- <li>
                <img src="" alt="">
                <h3>标题</h3>
                <p>详细描述</p>
                <strong>价格</strong>
        </li> -->
    </ul>


    <script>

        ajax({
            type: 'get',
            path: 'http://localhost/php/list.php',
            cb: data => {
                var res = '';

                for (var i in data) {
                   ata[i].goodsPrice + '</strong>'
                    // res += '</li>'

                    res += `
                        <li>
                            <a href="./detail.html">
                                <img src="${data[i].goods_img}" alt="">
                                <h3>${data[i].goods_title}</h3>
                                <p>${data[i].goods_des}</p>
                                <strong>${data[i].goods_price}</strong>
                            </a>
                        </li>
                    `
                }


                var oUl = document.getElementById('list');
                oUl.innerHTML = res;
            }
        })



    </script>

</body>

</html>